

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机密码生成器 - 随机字符串生成器 - Random Password Generator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="description" content="随机密码生成器 - 随机字符串生成器 - Random Password Generator" />

<link rel="stylesheet" href="//cdn.bootcss.com/pure/0.4.2/pure-min.css">

<style>
body, input, button, textarea, select {
    font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, Verdana, "PingFang SC", "Hiragino Sans GB", STHeiti, "Microsoft YaHei", "WenQuanYi Micro Hei", "WenQuanYi Micro Hei Mono", "WenQuanYi Zen Hei", "WenQuanYi Zen Hei Mono", "Noto Sans CJK SC", "Source Han Sans CN", SimSun, sans-serif;
}
body {
    padding: 10px;
}

a {
    color: #3b8bba;
    text-decoration: none;
}

a:hover {
    color: #265778;
}

#nav {
    background: #222;
}

#nav.translucent {
    background: none;
}

#nav a {
    color: #ddd;
    text-decoration: none;
    padding: .5em;
    display: inline-block;
}

#nav a:hover {
    color: #eee;
}

#nav .c7sky-ribbon {
    position: absolute;
    right: 10px;
    top: -3px;
    background: url(http://mofun.c7sky.com/_global/ribbon.png) no-repeat 50% 0;
    text-indent: -99em;
    overflow: hidden;
    width: 36px;
    height: 56px;
    padding: 0;
    border-top: 3px solid #34BB98;
    -webkit-transition: top .3s;
    -moz-transition: top .3s;
    transition: top .3s;
}
#nav .c7sky-ribbon:hover {
    top: 0;
}

#header, #main {
    margin: 0 auto;
    max-width: 768px;
}

#header {
    margin: 2em auto;
    padding: 1em 0 2em;
    border-bottom: 1px solid #eee;
    text-align: center;
    line-height: 1.5;
}

#header h1 {
    margin: 0;
    color: #444;
    font-weight: 300;
    font-size: 300%;
}

#header h2 {
    margin: 0;
    color: #666;
    font-weight: 300;
    font-size: 125%;
}

.adsbygoogle {
    margin: 50px auto;
    display: block!important;
}
#main {
    max-width: 400px;
}

ul {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eee;
    list-style: none;
    font-size: 14px;
}

li {
    clear: both;
    overflow: hidden;
    padding: .5em 0;
    border-bottom: 1px solid #eee;
}

.pure-form label {
    display: block;
    overflow: hidden;
    margin: 0;
}

.pure-form span {
    float: left;
    margin: 6px 0;
}

input {
    float: right;
    margin-top: 9px;
}

#password_length,#password_quantity {
    margin-top: 0;
    width: 5em;
}

#generate {
    margin: 1em 0;
}

#output {
	font-family: Monaco, Menlo, Consolas, Inconsolata, 'Deja Vu Sans Mono', 'Droid Sans Mono', 'Lucida Console', 'Courier New', Courier, monospace;
}

</style>
</head>
<body>
<div id="header">
    <h1>随机密码生成器 - 随机字符串生成器</h1>
    <h2>Random Password Generator</h2>
</div>

<div id="main" class="pure-form">
	<ul>
		<li><label><input type="checkbox" id="include_number" checked /><span>数字</span></label></li>
		<li><label><input type="checkbox" id="include_lowercaseletters" checked /><span>小写字母</span></label></li>
		<li><label><input type="checkbox" id="include_uppercaseletters" checked /><span>大写字母</span></label></li>
		<li><label><input type="checkbox" id="include_punctuation" checked /><span>标点符号</span></label></li>
		<li><label><input type="checkbox" id="password_unique" checked /><span>字符不重复</span></label></li>
		<li><label><span>密码长度</span><input type="number" id="password_length" min="0" value="12" /></label></li>
		<li><label><span>密码数量</span><input type="number" id="password_quantity" min="0" value="1" /></label></li>
	</ul>
	<button id="generate" class="pure-button pure-button-primary pure-input-1">生成密码</button>
	<textarea id="output" class="pure-input-1" cols="40" rows="7" readonly></textarea>
</div>

<script>
var $ = function(s){return document.getElementById(s)},
	$includeNumber = $("include_number"),
	$includeLowercaseletters = $("include_lowercaseletters"),
	$includeUppercaseletters = $("include_uppercaseletters"),
	$includePunctuation = $("include_punctuation"),
	$passwordUnique = $("password_unique"),
	$passwordLength = $("password_length"),
	$passwordQuantity = $("password_quantity"),
	$generate = $("generate"),
	$output = $("output");

function rand(max) {
    return Math.floor(Math.random() * max);
};

$generate.onclick = function () {
    var chars = "";

    if ($includeNumber.checked) chars += "0123456789";
    if ($includeLowercaseletters.checked) chars += "abcdefghijklmnopqrstuvwxyz";
    if ($includeUppercaseletters.checked) chars += "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    if ($includePunctuation.checked) chars += "`~!@#$%^&*()-_=+[{]}\|;:'\",<.>/?";

    var passwords = [],
		passwordUnique = $passwordUnique.checked;
    for (var i = 0, l = $passwordQuantity.value; i < l; i++) {
        var _chars = chars.split(""),
			password = "";
        for (var j = 0, k = $passwordLength.value; j < k; j++) {
            if (_chars.length < 1) break;
            var index = rand(_chars.length);
            password += _chars[index];
            if (passwordUnique) _chars.splice(index, 1);
        };
        passwords.push(password);
    };
    $output.value = passwords.join("\n");
};

$output.onfocus = function () {
    this.select();
}
</script>
</body>
</html>